<template>
  <div class="pandect">
     <my-header></my-header>
     <div class="container">
   
    <div class="banner">
      <img src="../assets/exhibition-banner.jpg" alt="">
    </div>
    <div class="content">
      <div class="exhibition">
        <div class="left">
        <h2>旅舍一览表</h2>
          <table>
            <thead>
              <tr>
                <td style="width:35px">序号</td>
                <td style="width:62px">省份</td>
                <td style="width:110px">城市</td>
                <td style="width:223px">旅舍</td>
                <td style="width:32px"></td>
              </tr>
            </thead>
            <tbody  v-for="item in manager" :key="item">
              <tr>
                <td>{{item.id}}</td>
                <td>{{item.province}}</td>
                <td>{{item.city}}</td>
                <td>{{item.hotel}}</td>
                <td>
                  <router-link to="/pandectdetail">{{item.ck}}</router-link>
                </td>
              </tr>
            </tbody>
          </table>
      </div>
      <div class="right">
        <div class="introduction-nav">
          <ul>
            <li>           
               旅舍总览
            </li>
            <li>
               旅舍一览表
            </li>
            <li>
              <a href="">中国香港青年旅舍</a>
            </li>
            <li>
              <a href="">中国澳门青年旅舍</a>
            </li>
            <li>
              <a href="">韩国青年旅舍推荐</a>
            </li>
            <li>
              <a href="">日本青年旅舍推荐</a>
            </li>
          </ul>
          <div class="exhibition-block">
            <router-link to="/yuding" class="yuding">
              <b></b>
              旅舍预定
            </router-link>
            <router-link to="/vip" class="huiyuan">
              <b></b>
              会员卡
            </router-link>
            <router-link to="/" class="jiameng">
              <b></b>
              旅舍加盟
            </router-link>
            <a href="">
              <img src="http://www.yhachina.com/data/images/2020-08-19/5f3cb08134015.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
      </div>
    </div>
    
  </div>
  <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
import MyFooter from '@/components/MyFooter.vue'


  export default {
  components: { MyFooter,MyHeader },
    data() {
      return {
        manager: ''
      }
    },
    methods: {
      getData(){
        const url='http://127.0.0.1:3000/v2/qnls/manager'
        this.axios.get(url).then(res=>{
          console.log(res);
          this.manager=res.data.data
          console.log(this.manager);
        })
      }
    },
    mounted(){
      this.getData()
    }
  }
</script>

<style lang="scss" scoped>
*{
  box-sizing: border-box;
}
.container{
  background-color: #f5f5f5;
}
.container .banner{
  background-color: #F5F5F5;

}
.container .banner img{
  width: 100%;
  display: block;
}
.container .content{
  position: relative;
  top: -60px;
  width: 1080px;
  margin: 0 auto;
  height: 1500px;
  
}
.container .content .exhibition{
  position: absolute;
  display: flex;
  justify-content: space-around;
  // top: -60px;
}
.container .content .left{
  width: 810px;
  background-color: #fff;
  padding: 25px 50px 25px 50px;
}
.container .content .left h2{
  font-size: 30px;
  margin-bottom: 30px;
}
.container .content .left table{
  width: 710px;
  color: #333;
  border-collapse: collapse;
  font-size: 14px;
}
// .container .content .left .clearfix:after{
//   clear: both;
//   content: '';
//   display: block;
// }
.container .content .left table thead{
  background-color: #F1F8ED;
  width: 710px;
  height: 60px;
  text-align: center;
  line-height: 60px;

}
.container .content .left table thead td{
  border: 1px solid #fff;
}
.container .content .left table tbody tr{
   width: 710px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid #eee;
}
.container .content .left table tbody td{
  border: 1px solid #eee;
  
}
.container .content .left table tbody a{
  text-decoration: none;
  color:#0000EE ;
}
.container .content .right .introduction-nav ul{
  width: 240px;
  height: 360px;
  background-color: #fff;
  // padding: 25px 50px 25px 50px;
  margin-left: 30px;
  margin-bottom: 30px;
}
.container .content .right .introduction-nav li{
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-weight: bold;
}
.container .content .right .introduction-nav li:nth-child(1){
  background-color:#7BB321;
  padding: 0 20px;
}
.container .content .right .introduction-nav li:nth-child(2){
  padding: 0 20px;
  background-color:#92CA38;
}
.container .content .right .introduction-nav ul a{
  text-decoration: none;
  color: #333;
  font-weight: normal;
  font-size: 14px;
  margin: 0 20px;
  display: block;
  background: url(http://www.yhachina.com/images/exhibition/introduction-nav-icon.png) no-repeat right center;
}
.container .content .right .introduction-nav li:hover{
  background-color: rgba(135,197,36,0.9);
}
.container .content .right .introduction-nav li:hover a{
  color:#fff;
}
.container .content .right .introduction-nav .exhibition-block{
  width: 240px;
  height: 330px;
  background-color: #fff;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.container .content .right .introduction-nav .exhibition-block a{
  display: inline-block;
  text-decoration: none;
  // height: 80px;
  line-height: 80px;
  background:url(	http://www.yhachina.com/images/exhibition/exhibition-r-icon4.png)  no-repeat right 20px center;
  border-radius: 5px;
  margin-bottom: 2px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.container .content .right .introduction-nav .exhibition-block .yuding{
  background-color: #87c524;
}
.container .content .right .introduction-nav .exhibition-block .yuding b{
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background: url(http://www.yhachina.com/css/app_z.png);
  background-position: -389px -422px;
  margin-left: 20px;
}
.container .content .right .introduction-nav .exhibition-block .huiyuan{
  background-color:  #f7941c;
}
.container .content .right .introduction-nav .exhibition-block .huiyuan b{
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background: url(http://www.yhachina.com/css/app_z.png);
  background-position: -419px -422px;
  margin-left: 20px;
}
.container .content .right .introduction-nav .exhibition-block .jiameng{
  background-color: #4b8fcc;
}
.container .content .right .introduction-nav .exhibition-block .jiameng b{
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  background: url(http://www.yhachina.com/css/app_z.png);
  background-position: -476px -60px;
  margin-left: 20px;
}
</style>